<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" type="text/css" href="css/login.css">
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	<!--导入布局js，共享header和footer-->
	<script type="text/javascript" src="js/include.js"></script>
	<script src="js/jquery-3.3.1.js"></script>
</head>

<body>
<!--引入头部-->
<div id="header"></div>
    <!-- 头部 end -->
    <section id="login_wrap">
        <div class="fullscreen-bg" style="background: url(images/login_bg.png);height: 532px;width: 100%;background-size: 100% 780px;">
        	
        </div>
        <div class="login-box">
        	<div class="title">
        		<img style="width: 50px;height: 50px;" src="images/logo.jpg" alt="">
        		<span>欢迎登录</span>
        	</div>
        	<div class="login_inner">
				
				<!--登录错误提示消息-->
        		<div id="errorMsg" class="alert alert-danger" ></div>
				<form id="loginForm" action="" method="post" accept-charset="utf-8">
        			<input type="hidden" name="action" value="login"/>
					<input name="username" type="text" placeholder="请输入账号" autocomplete="off">
        			<input name="password" type="text" placeholder="请输入密码" autocomplete="off">
        			<div class="verify">
					<input name="check" type="text" placeholder="请输入验证码" autocomplete="off">
					<span><img  src="images/verify_code.jpg" alt="" onclick="changeCheckCode(this)"></span>
					<script type="text/javascript">
						//图片点击事件
						function changeCheckCode(img) {
							img.src="checkCode?"+new Date().getTime();
						}
					</script>
			</div>
					<br>
			<div class="submit_btn">
        				<button type="button"  id="btn_sub">登录</button>
        			</div>        			       		
        		</form>
        		<div class="reg">没有账户？<a href="register.html">立即注册</a></div>
        	</div>
        </div>
    </section>
    <!--引入尾部-->
    <div id="footer"></div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.0.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <!--导入布局js，共享header和footer-->
    <script type="text/javascript" src="js/include.js"></script>
</body>
<script>
	importHeader();//导入公共头部
	importFooter();//导入公共尾部
	$(function () {
		//1.给登录按钮绑定单击事件
		$("#btn_sub").click(function () {
			//2.发送ajax请求，提交表单数据
			$.post("user/login",$("#loginForm").serialize(),function (data) {
				//data : {flag:false,errorMsg:''}
				if(data.flag){
					//登录成功
					location.href="index.html";
				}else{
					//登录失败
					$("#errorMsg").html(data.errorMsg);
				}
			});
		});
	});


	//3.处理响应结果



</script>
</html>